<template>
	<view class="swiper-home">
		<view class="banner">
			<swiper circular indicator-dots indicator-color="rgba(255,255,255,0.5)"
			indicator-active-color="#fff" autoplay @change="changeText" interval="6000">
				
				<swiper-item class="swierContent" v-for="item in swiperList">
					<image :src="item.src"  mode="aspectFill">
					</image>
					<text class="coverText" v-html="item.text" v-show="isShow">
						
					</text>
				</swiper-item>
				
			</swiper>
		</view>
	</view>
	
</template>

<script setup>
	import { ref ,onMounted,onUnmounted} from 'vue';
	import { useSafeHtml } from '../../utils/useSafeHtml';
	
	let swiperList=[
		{
			src:'../../common/images/mudan.jpg',
			text:"<text>hello everyone <br>下面我将用此项目作为一个简历介绍我的情况 </text>"
		},
		{
			src:'../../common/images/yuanweihua.jpg',
			text:"<text>里面每一个功能的内容，都换成了对我的自我介绍 </text>"
		},
		{
			src:'../../common/images/guihua.jpg',
			text:"<text>希望我能通过这个项目的功能向您详细介绍我自己 </text>"
		},
		{
			src:'../../common/images/xiangrikui.jpg',
			text:"<text>如果您能对我提出一些专业的建议 <br>我将不胜感激 </text>"
		},
		{
			src:'../../common/images/xilingcao.jpg',
			text:"<text>感谢观看<br>祝您事业有成！！</text>"
		},
	]
	
	let isShow=ref(false);
	let showText=ref();
	let clearText=ref()
	function setTime(){
		showText=setTimeout(()=>{
			isShow.value=true;
		},1500);
		clearText=setTimeout(()=>{
			isShow.value=false;
		},4500);
	}
	function clearTime(){
		clearTimeout(showText);
		clearTimeout(clearText);
	}
	
	onMounted(()=>{
	setTime();
	
	})
	function changeText(){
		setTime();
	}
	
	onUnmounted(()=>{
		clearTime();
	})
</script>

<style scoped lang="scss">
.banner{
		width: 750rpx;
		padding:30rpx 0;
		swiper{
			width: 750rpx;
			height: 340rpx;
			&-item{
				width: 100%;
				height: 100%;
				padding:0 30rpx;
				position: relative;
				image{
					
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
					
				}
				.coverText{
					width: 92%;
					height: 100%;
					border-radius: 10rpx;
					box-sizing: border-box;
					position: absolute;
					left: 30rpx;
					color: white;
					font-size: 40rpx;
					text-align: center;
					backdrop-filter: blur(20rpx);
					padding: 50rpx 40rpx 40rpx 40rpx ;
					
				}
			}
		}
		}
</style>